<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>OA系统</title>
    <link type="text/css" rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
    <link type="text/css" rel="stylesheet" th:href="@{/css/menu.css}"/>
    <link type="text/css" rel="stylesheet" th:href="@{/css/style.css}"/>
    <link type="text/css" rel="stylesheet" th:href="@{/css/all.css}"/>
    <link rel="shortcut icon" th:href="@{/favicon.ico}" />
    <style>
        #pagContent {
            min-height:0px !important;
        }
        /* 一级菜单 */
        .sidebar-menu > li > a i {
            margin-right: 6px;
            font-size: 18px;
            vertical-align: middle;
        }
        .sidebar-menu > li > a {
            color:#000000;
            background:#ffffff;
            font-family:Microsoft Yahei;
            font-size: 14px;
            padding-top:14px;
            border-left: 4px solid transparent;
        }
        .sidebar-menu > li > a:hover,
        .sidebar-menu > li > a:focus{
            color: #ef5418;
            background:#f0f0f0;
            font-weight: bolder;
        }

        .sidebar-menu > li.active > a {
            background: #e8e8e8;
            color: #ef5418;
            background:#f0f0f0;
            border-left: 4px solid #ef5418;
        }
        /* 二级菜单 */
        .sidebar-menu > li > ul > li > a {
            color:#000000;
            background:#ffffff;
            font-family:Microsoft Yahei;
            font-size: 14px;
            padding-top:14px;
            border-left: 4px solid transparent;
        }
        .sidebar-menu > li > ul > li > a:hover,
        .sidebar-menu > li > ul > li > a:focus{
            color: #ef5418;
            background:#f0f0f0;
            font-weight: bolder;
        }
        .sidebar-menu > li > ul > li.active > a {
            background: #e8e8e8;
            color: #ef5418;
            background:#f0f0f0;
            border-left: 4px solid #ef5418;
        }
        .sidebar-menu .treeview-menu {
            padding-left: 0px;
            text-indent: 6px;
        }
        footer {
            text-align: center;
            background-color: #1c2d3f;
            color: white;
/*
            padding: 5px 0px;
*/
            position: fixed;
            bottom:0px;
            height: 15px;
            width: 100%;
        }
        iframe {
            width:100%;
            border: none;
        }
        #content-main{
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin:0;
            padding:0;
        }
        .mainContent{
            width: 100%;
            height: 100%;
            border: 0;
        }
        /** 首页样式 */
        .ax_close_max {
            position: fixed;
            top: 5px;
            left: 5px;
            width: 30px;
            height: 30px;
            z-index: 9999;
            display: none;
            color: #ccc;
        }
        .nav navbar-nav li > a:hover,
        .nav navbar-nav li > a:active,
        .nav navbar-nav li > a:focus,
        .nav navbar-nav li > a:visited,
        .nav navbar-nav li > a:link{
            color: #fff;
            background: #00c0ef;
        }
        .nav > li:hover .dropdown-menu {display: block;}
        #content-main.max { height: calc(100% - 110px); overflow: hidden; width: 100%; height: 100%; left: 0px; position: absolute; top: 0px; z-index: 9998; margin: 0; }
    </style>
</head>
<body style="overflow: hidden">

<div class="wrapper" id="wrapper">
    <header class="main-header" style="max-height:none;">
        <div class="menu-contrainer-yw" >
            <img class="logo-yw" th:src="@{/img/kua.jpg}" style="margin-left:5px;">
            <h class="title-yw">床前明月光，疑是地上霜</h>
            <div class="menu-yw clearfix pull-right">
                <ul class="nav navbar-nav">
                    <li class="dropdown notifications-menu">
                    <li><a id="fullScreen" style="cursor:pointer;" ><i class="fa fa-arrows-alt"></i>全屏</a></li>
                    </li>
                    <li class="dropdown user user-menu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">

                            <img id="myHead" src="" class="user-image" alt="">
                            <!-- 显示登录的用户名 -->
                            <span class="hidden-xs" id="userName" th:text="${userName}"></span></br>
                        </a>


                        <ul class="dropdown-menu" style="width: 200px;">
                            <li class="user-footer">
                                <div class="pull-left">
                                    <a href="javascript:void(0);" class="btn btn-default btn-flat" onclick="pwdChange()">
                                        <i class="fa fa-bell-o">&nbsp;密码修改</i></a>
                                </div>
                                <div class="pull-right">
                                    <a href="javascript:void(0);" class="btn btn-default btn-flat" onclick="logout()">
                                        <i class="fa fa-power-off">&nbsp;注销</i></a>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <!-- 左侧菜单开关按钮 -->
                    <li>
                        <a href="http://47.107.121.240:8090/HelpCenter/index/search.do" target="_blank" style="padding: 14px 5px;">
                            <img src="../img/help.png" class="user-image" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button" style="padding: 15px 5px;">
                            <span class="sr-only"></span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="navbar-custom-menu">
            </div>
        </div>
        <div class="menu-child-yw clearfix" style="display: none;"></div>
    </header>
    <aside class="main-sidebar" style="height: 100%; overflow-y: auto; padding-top: 50px;background-color:white">
        <div class="sidebar">
            <ul class="sidebar-menu" id="menuList">
            </ul>
        </div>
    </aside>
    <div id="pagContent" class="content-wrapper" style="overflow-x:auto; overflow-y: hidden;">
        <div id="pwd-modal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"
                                aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">密码修改</h4>
                    </div>
                    <div class="modal-body">
                        <form id="form-input" class="form-horizontal has-info form-validate">
                            <input type="hidden" name="id">
                            <div class="form-group">
                                <label class="control-label col-md-2 required1">原密码</label>
                                <div class="col-md-9">
                                    <input id="oldPwd" type="password" class="form-control" name="oldPwd" maxlength="50" placeholder="请输入原密码">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-2 required1">新密码</label>
                                <div class="col-md-9">
                                    <input id="newPwd1" type="password" class="form-control" name="newPwd1" maxlength="50" placeholder="请输入新密码">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-2 required1">确认密码</label>
                                <div class="col-md-9">
                                    <input id="newPwd2" type="password" class="form-control" name="newPwd2" maxlength="50" placeholder="请再次输入新密码">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button id="btn-cancel-pwd" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button id="btn-save-pwd" type="button" class="btn btn-info" onclick="pwdSave();">保存</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-tabs" style="margin-right: 1px;">
            <nav class="page-tabs menuTabs">
                <div class="page-tabs-content">
                    <a href="javascript:;" class="active menuTab" th:data-id="${firstMenuUrl}"  th:text="${firstMenuName}">首页</a>
                </div>
            </nav>
                <div class="btn-group roll-nav roll-right"  style="width: 120px;">
                    <button class="dropdown J_tabClose" data-toggle="dropdown" style="width: 120px;">
                        页签操作<span class="caret"></span>
                    </button>
                    <ul role="menu" class="dropdown-menu dropdown-menu-right" style="min-width: 120px;">
                        <li><a class="tabCloseOther" href="javascript:void(0);">关闭其他</a></li>
                        <li><a class="tabCloseAll" href="javascript:void(0);">全部关闭</a></li>
                        <li><a class="tabReload" href="javascript:void(0);">刷新本页</a></li>
                        <!--
                                                <li><a class="tabMaxCurrent" href="javascript:void();">全屏显示</a></li>
                        -->
                    </ul>
                </div>
        </div>
        <a id="ax_close_max" class="ax_close_max" href="#" title="关闭全屏"> <i class="fa fa-times-circle-o fa-2x"></i> </a>

        <div class="mainContent" id="content-main">
            <!-- iframe，src设置为默认加载显示额的页面-->
<!--
            <iframe src="/shop/getShopMapRank" class="MyFrame" name="iframe0" data-id="/shop/getShopMapRank" width="100%" height="100%" frameborder="0" seamless id="frameWin" style="height:100%;">
-->
            <iframe th:src="${firstMenuUrl}" class="MyFrame" name="iframe0" th:data-id="${firstMenuUrl}" width="100%" height="100%" frameborder="0" seamless id="frameWin" style="height:100%;margin-bottom: 100px;">

            </iframe>


        </div>
    </div>
    <footer>举头望明月，低头思故乡</footer>
</div>
</body>
<script language='JavaScript' th:src='@{/plugin/jQuery/jQuery-2.2.0.min.js}'></script>
<script language='JavaScript' th:src="@{/ajax/layer/layer.min.js}"></script>
<script language='javascript' th:src='@{/js/constant.js}'></script>
<script language='JavaScript' th:src='@{/plugin/jQuery/jquery.mousewheel.min.js}'></script>
<script language='JavaScript' th:src='@{/plugin/jquery-easyui-1.5.1/jquery.easyui.min.js}'></script>
<script language='JavaScript' th:src='@{/plugin/bootstrap/js/bootstrap.js}'></script>
<script language='JavaScript' th:src='@{/plugin/adminLTE/js/app.min.js}'></script>
<script language='JavaScript' th:src='@{/plugin/lobibox/dist/js/lobibox.js}'></script>
<script language='JavaScript' th:src='@{/plugin/blockUI/jquery.blockUI.js}'></script>
<script language='JavaScript' th:src='@{/js/common.js}'></script>
<script language='JavaScript' th:src='@{/js/network.js}'></script>
<script language='JavaScript' th:src='@{/js/public.js}'></script>
<script language='JavaScript' th:src='@{/js/ry-ui.js}'></script>
<script language='JavaScript' th:src='@{/plugin/fullscreen/jquery.fullscreen.js}'></script>
<script type="text/javascript">
    //注销
    function logout() {
        messageBox.confirm("是否注销？", function () {
            window.location.href = "/loginOut";
            //通过登出过滤器实现登出操作
            //window.location.href = "logout";
        }, undefined);
    }
    //密码修改
    function pwdChange() {
        $("#oldPwd").val("");
        $("#newPwd1").val("");
        $("#newPwd2").val("");
        $("#pwd-modal").modal("show");
    };
    function pwdSave () {
        var oldPwd = $("#oldPwd").val();
        var newPwd1 = $("#newPwd1").val();
        var newPwd2 = $("#newPwd2").val();
        //密码不能为空
        if( oldPwd == null || trim(oldPwd) =="" ){
            messageBox.warning("原密码不得为空");
            return;
        }
        if( newPwd1 == null || trim(newPwd1) =="" ){
            messageBox.warning("新密码不能为空");
            return;
        }
        if( newPwd2 == null || trim(newPwd2) =="" ){
            messageBox.warning("确认密码不能为空");
            return;
        }
        ajax.postData(publicData.urls.system.ChangePwd, {"oldPwd":oldPwd,"newPwd1":newPwd1,"newPwd2":newPwd2},
            function (data) {
                if(data != null && data != "" && data != "null"){
                    var resultData = data;
                    if(resultData == "1"){
                        messageBox.warning("原密码不正确");
                    }else if(resultData == "2"){
                        messageBox.warning("密码确认错误");
                    }else if(resultData == "3"){
                        messageBox.warning("新密码与原密码不能一样，请重新输入！");
                    }else if(resultData == "4"){
                        $("#pwd-modal").modal("hide");
                        messageBox.success("密码修改成功,即将跳转登陆页面！");
                        setTimeout('toLogin()',2000);
                    }
                }
            });
    }
        function toLogin(){
            window.location.href = "/loginOut";
        }
    function trim(str){
        return str.replace(/(^\s*)|(\s*$)/g, "");
    }
    //菜单点击事件
    function openwindow(src) {
        $("#frameWin").attr("src",src);
    }


    $("#pagContent").height($(window).height()-$("header").height());
    $(window).resize(function(){
        $("#pagContent").height($(window).height()-$("header").height());
    });

    var menuload = {
        //菜单高亮切换
        "menuHighLight" : function() {
            $("ul.treeview-menu li").bind("click" , function(){
                $(this).addClass("active").siblings().removeClass("active");
            });
        }
    };

    $.ajax({
        type: "post",
        url:  "/index",
        data: {},
        success: function(r) {
            $("#menuList").html(r);
            menuload.menuHighLight();
            $(".sidebar ul li:first").addClass("active");
            $(".sidebar ul li:first ul:first").addClass("menu-open");
            $(".sidebar ul li:first ul:first").css("display","block");
            $(".sidebar ul li:first ul:first li:first").addClass("active");
        }
    });


    //开始


    function calSumWidth(elements) {
        var width = 0;
        $(elements).each(function() {
            width += $(this).outerWidth(true);
        });
        return width;
    }

    //滚动到指定选项卡
    function scrollToTab(element) {
        var marginLeftVal = calSumWidth($(element).prevAll()),
            marginRightVal = calSumWidth($(element).nextAll());
        // 可视区域非tab宽度
        var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
        //可视区域tab宽度
        var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
        //实际滚动宽度
        var scrollVal = 0;
        if ($(".page-tabs-content").outerWidth() < visibleWidth) {
            scrollVal = 0;
        } else if (marginRightVal <= (visibleWidth - $(element).outerWidth(true) - $(element).next().outerWidth(true))) {
            if ((visibleWidth - $(element).next().outerWidth(true)) > marginRightVal) {
                scrollVal = marginLeftVal;
                var tabElement = element;
                while ((scrollVal - $(tabElement).outerWidth()) > ($(".page-tabs-content").outerWidth() - visibleWidth)) {
                    scrollVal -= $(tabElement).prev().outerWidth();
                    tabElement = $(tabElement).prev();
                }
            }
        } else if (marginLeftVal > (visibleWidth - $(element).outerWidth(true) - $(element).prev().outerWidth(true))) {
            scrollVal = marginLeftVal - $(element).prev().outerWidth(true);
        }
        $('.page-tabs-content').animate({
                marginLeft: 0 - scrollVal + 'px'
            },
            "fast");
    }


/*    $(".sidebar a").each(function(index) {
        if (!$(this).attr('data-index')) {
            $(this).attr('data-index', index);
        }
    });*/

    function menuItem(myurl,mytext,myindex) {
        var dataUrl = myurl;
        // 获取标识数据
/*
        $("#frameWin").attr("src",dataUrl);
*/
        var dataIndex = myindex;
        var menuName = mytext;
        var flag = true;
        if (dataUrl == undefined || $.trim(dataUrl).length == 0) return false;

        // 选项卡菜单已存在
        $('.menuTab').each(function() {
            if ($(this).data('id') == dataUrl) {
                if (!$(this).hasClass('active')) {
                    $(this).addClass('active').siblings('.menuTab').removeClass('active');
                    scrollToTab(this);
                    // 显示tab对应的内容区
                    $('.MyFrame').each(function() {
                        if ($(this).data('id') == dataUrl) {
                            $(this).show().siblings('.MyFrame').hide();
                            return false;
                        }
                    });
                }
                flag = false;
                return false;
            }
        });
        // 选项卡菜单不存在
        if (flag) {
            var str = '<a href="javascript:;" class="active menuTab" data-id="' + dataUrl + '">' + menuName + ' <i class="fa fa-times-circle"></i></a>';
            $('.menuTab').removeClass('active');

            // 添加选项卡对应的iframe
            var str1 = '<iframe class="MyFrame" name="iframe' + dataIndex + '" width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" seamless></iframe>';
            $('.mainContent').find('iframe.MyFrame').hide().parents('.mainContent').append(str1);

            $.modal.loading("数据加载中，请稍后...");

            $('.mainContent iframe:visible').load(function () {
                $.modal.closeLoading();
           });

            // 添加选项卡
            $('.menuTabs .page-tabs-content').append(str);
            scrollToTab($('.menuTab.active'));
        }
        return false;
    }

    // 关闭选项卡菜单
    function closeTab() {
        var closeTabId = $(this).parents('.menuTab').data('id');
        var currentWidth = $(this).parents('.menuTab').width();

        // 当前元素处于活动状态
        if ($(this).parents('.menuTab').hasClass('active')) {

            // 当前元素后面有同辈元素，使后面的一个元素处于活动状态
            if ($(this).parents('.menuTab').next('.menuTab').size()) {

                var activeId = $(this).parents('.menuTab').next('.menuTab:eq(0)').data('id');
                $(this).parents('.menuTab').next('.menuTab:eq(0)').addClass('active');

                $('.mainContent .MyFrame').each(function() {
                    if ($(this).data('id') == activeId) {
                        $(this).show().siblings('.MyFrame').hide();
                        return false;
                    }
                });

                var marginLeftVal = parseInt($('.page-tabs-content').css('margin-left'));
                if (marginLeftVal < 0) {
                    $('.page-tabs-content').animate({
                            marginLeft: (marginLeftVal + currentWidth) + 'px'
                        },
                        "fast");
                }

                //  移除当前选项卡
                $(this).parents('.menuTab').remove();

                // 移除tab对应的内容区
                $('.mainContent .MyFrame').each(function() {
                    if ($(this).data('id') == closeTabId) {
                        $(this).remove();
                        return false;
                    }
                });
            }

            // 当前元素后面没有同辈元素，使当前元素的上一个元素处于活动状态
            if ($(this).parents('.menuTab').prev('.menuTab').size()) {
                var activeId = $(this).parents('.menuTab').prev('.menuTab:last').data('id');
                $(this).parents('.menuTab').prev('.menuTab:last').addClass('active');
                $('.mainContent .MyFrame').each(function() {
                    if ($(this).data('id') == activeId) {
                        $(this).show().siblings('.MyFrame').hide();
                        return false;
                    }
                });

                //  移除当前选项卡
                $(this).parents('.menuTab').remove();

                // 移除tab对应的内容区
                $('.mainContent .MyFrame').each(function() {
                    if ($(this).data('id') == closeTabId) {
                        $(this).remove();
                        return false;
                    }
                });
            }
        }
        // 当前元素不处于活动状态
        else {
            //  移除当前选项卡
            $(this).parents('.menuTab').remove();

            // 移除相应tab对应的内容区
            $('.mainContent .MyFrame').each(function() {
                if ($(this).data('id') == closeTabId) {
                    $(this).remove();
                    return false;
                }
            });
            scrollToTab($('.menuTab.active'));
        }
        return false;
    }

    $('.menuTabs').on('click', '.menuTab i', closeTab);


    //关闭其他选项卡
    function closeOtherTabs() {
        $('.page-tabs-content').children("[data-id]").not(":first").not(".active").each(function() {
            $('.MyFrame[data-id="' + $(this).data('id') + '"]').remove();
            $(this).remove();
        });
        $('.page-tabs-content').css("margin-left", "0");
    }
    $('.tabCloseOther').on('click', closeOtherTabs);


    // 点击选项卡菜单
    function activeTab() {
        if (!$(this).hasClass('active')) {
            var currentId = $(this).data('id');
            // 显示tab对应的内容区
            $('.mainContent .MyFrame').each(function() {
                if ($(this).data('id') == currentId) {
                    $(this).show().siblings('.MyFrame').hide();
                    return false;
                }
            });
            $(this).addClass('active').siblings('.menuTab').removeClass('active');
            scrollToTab(this);
        }
    }

    // 点击选项卡菜单
    $('.menuTabs').on('click', '.menuTab', activeTab);

    // 双击选项卡全屏显示
    function activeTabMax() {
        $('#content-main').toggleClass('max');
        $('#ax_close_max').show();
    }
    // 双击选项卡全屏显示
    $('.menuTabs').on('dblclick', '.menuTab', activeTabMax);

    // 关闭全屏
    $('#ax_close_max').click(function(){
        $('#content-main').toggleClass('max');
        $('#ax_close_max').hide();
    })

    $(window).keydown(function(event) {
        if (event.keyCode == 27) {
            $('#content-main').removeClass('max');
            $('#ax_close_max').hide();
        }
    });

    // 全屏显示
    $('#fullScreen').on('click', function () {
        $('#wrapper').fullScreen();
    });

    // 关闭全部
    $('.tabCloseAll').on('click', function() {
        $('.page-tabs-content').children("[data-id]").not(":first").each(function() {
            $('.MyFrame[data-id="' + $(this).data('id') + '"]').remove();
            $(this).remove();
        });
        $('.page-tabs-content').children("[data-id]:first").each(function() {
            $('.MyFrame[data-id="' + $(this).data('id') + '"]').show();
            $(this).addClass("active");
        });
        $('.page-tabs-content').css("margin-left", "0");
    });

    //刷新iframe
    function refreshTab() {
        var currentId = $('.page-tabs-content').find('.active').attr('data-id');
        var target = $('.MyFrame[data-id="' + currentId + '"]');
        var url = target.attr('src');
        target.attr('src', url).ready();
    }

    // 刷新按钮
    $('.tabReload').on('click', refreshTab);

</script>
</html>
